<template>
  <div>
  	<shop-header :is-show-icon="isShowIcon">	
			<h2>收货地址</h2>
			<span class="edit-address" @click="toggleShowEdit">{{ editText }}</span>	
		</shop-header>
		<div class="address-wrapper">
			<div class="address-container">
				<router-link v-for="(item, index) in addressList" :key="item.id" class="address-cell-item bottom-1px" :to="{ path: '/my/address/edit', query: { id: item._id } }" tag="div">
					<div class="address-check" @click.stop="selectItem(index)" v-if="buyFrom">
						<x-icon fill="#f23030" type="ios-checkmark" v-if="selectIndex == index" size="24"></x-icon>
          	<x-icon style="fill: #999" type="ios-circle-outline" v-if="selectIndex != index" size="24"></x-icon>
					</div>
					<div class="address-container">
						<div class="cell-top">
							<span class="name">{{ item.name }}</span>
							<span class="phone">{{ item.phone }}</span>
							<span class="default-tip" v-if=" item.isDefault && !buyFrom ">[默认]</span>
						</div>
						<div class="address-content">
							<span class="ad-text">{{ item.province + item.city + item.county + item.detailInfo }}</span>
						</div>
						<div @click.stop.prevent="deleteAddr(item._id, index)" class="delete-address" v-if="isShowEdit">
							<div class="block-middle">
								<x-icon type="ios-trash-outline" size="22"></x-icon>
								<span>删除</span>
							</div>	
						</div>
					</div>
				</router-link>
			</div>
		</div>
    <no-results v-if="addressList.length === 0"></no-results>
		<div class="seat-wrapper">
			<div class="add-address-btn" v-if="!isShowEdit">
				<six-button type="danger" :to="{ path: '/my/address/new' }">+ 新建收货地址</six-button>
			</div>
		</div>
  </div>
</template>

<script>
import ShopHeader from '@/components/public/ShopHeader'
import http from '@/utils/http'
import NoResults from '@/components/public/NoResults'

export default {
	components: {
		ShopHeader,
    NoResults
	},
  data () {
  	return {
  		isShowIcon: false,
  		isShowEdit: false,
  		selectIndex: 0,
  		buyFrom: false,
  		addressList: []
  	}
  },
  computed: {
  	editText () {
  		if (this.isShowEdit) return '完成'
  		return '编辑'	
  	}
  },
  methods: {
  	toggleShowEdit () {
  		this.isShowEdit = !this.isShowEdit
  	},
  	selectItem (index) {
  		this.selectIndex = index
  	},
  	deleteAddr (_id, index) {
  		this.$vux.confirm.show({
  			title: '提示信息',
  			content: '确定要删除吗？',
  			onConfirm: () => {
  				http.post('/api/v1/deleteAddress', { id: _id }, false, res => {
		  			if (res.status == 1) {
		  				this.addressList.splice(index, 1)
              this.isShowEdit = !this.isShowEdit
		  				this.$vux.toast.show({
                type: 'success',
		            text: res.msg,
                width: 'auto',
                position: 'middle'
		          })
		  			}else {
              this.$vux.toast.show({
                type: 'warn',
                text: res.msg,
                width: 'auto',
                position: 'middle'
              })
            }
	  			})
  			}
  		})		
  	},
  	initAddress () {
  		http.get('/api/v1/getAllAddress', {}, false, res => {
  		if (res.status == 1) {
  			this.addressList = res.data	
  		}
  	})
  	}
  },
  beforeRouteEnter (to, from, next) {
  	if (from.path == '/order/buy') {
	   	next(vm => {
	   		vm.buyFrom = true
	   	})
    }else {
   		next()
    }
   
  },
  created () {
  	let a_id = this.$route.query.aid
  	if (a_id) {
  		let defultIndex = this.addressList.findIndex(n => n.id == a_id)
  		this.selectIndex = defultIndex
  	}
  	this.initAddress()
  },
  watch: {
  	'$route' (to, from) {
  		this.initAddress()
  	}
  }
}
</script>

<style scoped>
.seat-wrapper {
	height: 46px;
}
.add-address-btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
}
.add-address-btn button {
	color: #fff;
	width: 100%;
	height: 46px;
	line-height: 46px;
}
.address-cell-item {
	display: flex;
	align-items: center;
	position: relative;
	background: #fff;
	padding: 15px;
}
.address-cell-item:active {
	background: #f5f5f5;
}
.address-cell-item:after {
	bottom: 0;
} 
.address-cell-item:before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 17px;
}
.address-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  font-size: 20px;
  line-height: normal;
}
.cell-top,
.address-content {
	padding-right: 30px;
}
.address-content {
	display: flex;
	padding-top: 2px;
}
.address-content span {
	font-size: 13px;
}
span.default-tip {
	flex: 0 0 auto;
	margin-right: 5px;
	color: #ff5e5d;
	line-height: 18px;
}
span.ad-text {
	flex: 1;
	font-size: 13px;
	color: #999;
	line-height: 18px;
}
.edit-address {
  position: absolute;
  right: 15px;
  top: 6px;
  width: 30px;
  height: 30px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
.delete-address {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background: #ff5e5d;
	width: 50px;
	text-align: center;
	font-size: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.delete-address svg {
	fill: #fff;
	display: inline-block;
}
.delete-address span {
	font-size: 13px;
	color: #fff;
	display: block;
	line-height: 20px;
}
</style>
